<script lang="ts" setup>
import { getTopNews } from '~/api/home'
import { decode, encode } from '~/utils/base/dataEncry'
const dayjs = useDayjs()
const props = defineProps({
    type: {
        type: [Array, String],
        default: () => [],
    },
    isFF: {
        type: Boolean,
        default: false,
    },
})
const queryParams = {
    "colNames": [
       "title_name","origin","release_time","cover_file_name","id"
    ],
    "condition": [
        {
        "colName": "positions_one", 
        "value": "首页", 
        "ruleType": "eq"
        },
        {
        "colName": "status", 
        "value": "已审核", 
        "ruleType": "eq"
        }
        ]
}
function getData() {
    getTopNews(queryParams).then((res) => {
        xinwen.value = res.data.map(item=>({
            title:item.title_name,
            publier:item.origin,
            date:dayjs(item.release_time).format('YYYY-MM-DD'),
            id:item.id,
            url:item.cover_file_name
        })).slice(0, 5)
        showImgs.value = res.data.map(item=>({
            src:item.cover_file_name,
            alt:item.title_name,
            id:item.id
        })).slice(0, 5)
    }).catch(() => {
    })
}
function clickItem(item) {
    getTopNews({
        condition: [{ colName: 'id', ruleType: 'eq', value: item.id }],
    },).then(res => {
        navigateTo({
            path: `/peopleHealth/topNewsDetail`,
            query: {
                data: encode(res.data[0]),
            },
        })
    })

}
const showImgs = ref([

])

const xinwen= ref([

])
getData()


</script>
<template>
    <ClientOnly>
        <div class="mx-auto bg-image border-2 border-solid border-#AC8358 rounded-10px p-20px m-b-10" flex="~ justify-between"
            :class="{ 'w-1200px': props.type === '全部', 'w-900px': props.type !== '全部' }">
            <div class="min-w-600px rounded-10px bg-l-img">
                <el-carousel width="600px" height="370px">
                    <el-carousel-item v-for="item in showImgs" :key="item.alt">
                        <div @click="clickItem(item)" :style="{ 'background-image': 'url(' + getImgUrl(item.src) + ')' }"
                            class="rounded-10px bg-cover min-h-370px cursor-pointer"></div>
                    </el-carousel-item>
                </el-carousel>
            </div>
            <div class="flex-1">
                <div flex="~ justify-between place-items-center">
                    <div class="bg-l-image m-l-4 m-t-1">新闻中心</div>
                    <div class="m-r-2 m-t-1">
                        <NuxtLink to="/peopleHealth/topNews">
                        <span class=" text-#977D6A m-1 cursor-pointer">更多</span>
                        </NuxtLink>
                        <img class="flex-shrink-0 w-25px h-25px inline " src="/img/homeico.png" alt="" />
                    </div>
                </div>
                <div class="m-l-4">
                    <div  v-for="(item, index) in xinwen" flex="~ justify-between place-items-center" class="m-t-10px">
                        <div>
                            <p class="whitespace-nowrap max-w-420px overflow-hidden text-ellipsis cursor-pointer active:text-#AC8358" @click="clickItem(item)"><b>{{ item.title }}</b></p>
                            <p class="text-#a49595 m-l-10px ">{{ item.publier }}</p>
                        </div>
                        <div>{{ item.date }}</div>
                    </div>

                </div>

            </div>





        </div>
    </ClientOnly>
</template>

<style scoped lang="scss">
.bg-image {
    background-image: url('/img/homeBooks.png');
    background-repeat: round;
    .bg-l-image {
    background-image: url('/img/homeBookl.png');
    color: white;
    font-size: 1.6rem;
    width: 200px;
    padding-right: 2.25rem;
    line-height: 3.5rem;
    text-align: center;
    font-family: cursive;
   
  }
}
</style>